import React, {JSX, createContext, useCallback, useState} from 'react';
import {ScrollView} from 'react-native';
import MyHeader from './conpoments/Header';
import AccountFinancial from './conpoments/AccountFinancial';
import InviteCard from './conpoments/InviteCard';
import Menu from './conpoments/Menu';
import {useNavigate} from '../../navigate/navigate';
import ErrorBoundary from '../../kit/com/ErrorBoundary';
import Skeleton from './conpoments/Skeleton';

type State = {};

const initialiState: State = {};

type ContextValue = {
  set: (params: State) => void;
} & State;

const MyScreenContext = createContext<ContextValue | undefined>(undefined);

function MyScreen(): JSX.Element {
  const [state, setState] = useState<State>(initialiState);
  const navigate = useNavigate();

  const set = useCallback(
    (params: State) => {
      setState({...params});
    },
    [setState],
  );

  const onPress = useCallback((evt: string) => {
    console.log('点击了');
    console.log(evt);
  }, []);

  const onNowWithdrawalPress = () => {
    navigate.navigateWithdrawal();
  };

  return (
    <MyScreenContext.Provider value={{...state, set}}>
      <ScrollView style={{flex: 1}}>
        <MyHeader />
        <AccountFinancial onPress={onNowWithdrawalPress} />
        <InviteCard />
        <Menu onPress={onPress} />
      </ScrollView>
    </MyScreenContext.Provider>
  );
}

export default () => (
  <ErrorBoundary skeleton={<Skeleton/>}>
    <MyScreen />
  </ErrorBoundary>
);
